<template>
  <div class="top-up">
    <div class="top-up-content">
      <div class="top-up-box">
        <!-- <iframe
          src="https://test.milaasia.com/#/topUp"
          width="1200px"
          height="100%"
          frameborder="0"
        ></iframe> -->

        <!-- <topUpBox :productData="productData" @comfirmPay="comfirmPay"> </topUpBox> -->
      </div>
    </div>
    <commonFooter></commonFooter>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuth } from '@/use/useAuth'
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import tabTitle from './components/tabTitle.vue'

import { fetchCreatePayermaxOrder } from '@/api/game'
import { showDialog } from 'vant'

import topUpBox from './components/topUpBox.vue'
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
let { proxy } = instance
const store = useUserStore()
const user = computed(() => store.getUserInfo)
console.log(user, 123)
const useinfo = ref({
  user_id: user.value.user_id,
  username: user.value.username,
})
let buttonColo = ref('#f5f5f5')

let textColor = ref('#818181')

// 支付
let orderData = ref([])
const handleFetchCreatePayermaxOrder = async (payObj) => {
  let data = await fetchCreatePayermaxOrder(payObj)

  if (data.pay_url) {
    window.location.href = `${data.pay_url}`
  }
}

const comfirmPay = (data) => {
  if (!useinfo.value.user_id) {
    showDialog({
      message: proxy.$t('pleaselogin'),
    }).then(() => {
      // 关闭弹窗的逻辑
    })
  } else {
    let payObj = {
      amount: data.price,
      app_id: '20049',
      product_id: data.id,
      user_id: useinfo.value.user_id,
      front_call_back_url: window.location.href,
    }

    handleFetchCreatePayermaxOrder(payObj)
  }
}
</script>
<style lang="scss" scoped>
.top-up {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f6f6f6;
  font-weight: 300;
  font-size: 15px;

  .top-up-content {
    width: 1200px;
    background: #fdfaf7;
    display: flex;
    // align-items: center;
    justify-content: center;
    height: calc(100vh - 200px);
  }

  .top-up-box {
    // margin-top: 60px;
  }
}

// .footer {
//   width: 100%;
//   height: 92px;
//   background-color: rgb(109 102 102);
//   z-index: 9999;
//   position: relative;
//   margin-top: 20px;
//   .footer-mid {
//     margin: 0 auto;
//     overflow: hidden;
//     font-size: 16px;
//     width: 810px;
//   }
// }

// 1122
</style>
